// Zurmo is a customer relationship management program developed by
// Zurmo, Inc. Copyright (C) 2014 Zurmo Inc.
//
// Zurmo is free software; you can redistribute it and/or modify it under
// the terms of the GNU Affero General Public License version 3 as published by the
// Free Software Foundation with the addition of the following permission added
// to Section 15 as permitted in Section 7(a): FOR ANY PART OF THE COVERED WORK
// IN WHICH THE COPYRIGHT IS OWNED BY ZURMO, ZURMO DISCLAIMS THE WARRANTY
// OF NON INFRINGEMENT OF THIRD PARTY RIGHTS.
//
// Zurmo is distributed in the hope that it will be useful, but WITHOUT
// ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
// FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more
// details.
//
// You should have received a copy of the GNU Affero General Public License along with
// this program; if not, see http://www.gnu.org/licenses or write to the Free
// Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA
// 02110-1301 USA.
//
// You can contact Zurmo, Inc. with a mailing address at 27 North Wacker Drive
// Suite 370 Chicago, IL 60606. or at email address contact@zurmo.com.
//
// The interactive user interfaces in original and modified versions
// of this program must display Appropriate Legal Notices, as required under
// Section 5 of the GNU Affero General Public License version 3.
//
// In accordance with Section 7(b) of the GNU Affero General Public License version 3,
// these Appropriate Legal Notices must retain the display of the Zurmo
// logo and Zurmo copyright notice. If the display of the logo is not reasonably
// feasible for technical reasons, the Appropriate Legal Notices must display the words
// "Copyright Zurmo Inc. 2014. All rights reserved".

#builder{
	.view-toolbar-container{
		border-top:none;
	}
	.right-column{
		.right-side-edit-view-panel{
			background: none;
			padding: 0;
			overflow: hidden;
		}
	}
	.form-fields{
		td{
			padding-left: 0 !important;
		}
	}
}

.previewing-builder{
	overflow: hidden !important;
	height: auto !important;
	.HeaderView{
		z-index: 0;
	}
}

#canvas-iframe{
	border: 1px solid #ededed;
	min-height: 800px;
	width: 100%;
	height: 100%;
	background:url("@{path}psd-light.png") left top repeat;
	position: relative;
	min-width: 600px;
}

#iframe-overlay{
	display: none;
	&.freeze{
		display: block;
	}
}

#preview-iframe-container {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 999999 !important;
	overflow: scroll;
	background: #fff;
}

#preview-iframe-container-close-link{
	position: absolute;
	right: 10px;
	top: 10px;
}

#preview-iframe{
	width: 100%;
	height: 100%;
	display: block;
}

#building-blocks{
	list-style: none;
	display: block;
	li{
		float: left;
		width: 30%;
		height: 105px;
		margin:0 3.33% 15px 0;
		display: block;
		cursor: pointer;
		.animateAll(0.18s);
		&:active{
			cursor: move;
		}
		div{
			.draggable-element-clone();
			width: 100% !important;
			height: 100% !important;
			.b-shadow(none);
			position:relative;
		}
	}
}

@media all and (max-width: 900px){
	#building-blocks{
		li{
			width: 46%;
			margin-right: 4%;
		}
		i{
			font-size: 50px;
		}
	}
}

.draggable-element-clone{
	display: block;
	width: 105px !important;
	height: 105px !important;
	border: 3px solid #efefef;
	.radius(2px);
	float: none;
	margin: 0;
	z-index: 999999;
	background:#fff;
	text-align: center;
	.b-shadow(0 0 1px 1px rgba(153, 153, 153, 0.5));
	i{
		display: block;
		text-align: center;
		font-size: 80px;
		line-height: 1px;
		margin-top: 30px;
		color: #ddd;
		.animateAll(0.18s);
	}
	span{
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 10px 0;
		background: #efefef;
		color: #acacac;
		font-size: 13px;
		font-weight: bold;
	}
}

#element-edit-container{
	position: absolute;
	top: 120px;
	left: 5px;
	width: 30%;
	z-index: 999;
	h3{
		margin-bottom: 15px;
	}
}

#element-edit-form-overlay-container{
	position: relative;
	padding:10px;
	//.portlet-gradient();
	.panel{
		width: 100%;
		.tabs-container{
			width: 100%;
		}
	}
	.element-edit-form, .wrapper{
		.unstyle-panel() !important;
	}
	.view-toolbar-container{
		border-top:1px solid #cccccc;
	}
}

.element-edit-form{
	position: relative;
	th{
		width: 35%;
		padding-top: 6px;
	}
	td{
		width: 65%;
	}
	.redactor_box iframe{
		min-height: 400px;
	}
	.edit-form-tab-content{ //.tabs-container
		z-index: 99999;
	}
}

.builder-position-checkbox{
	width: 50%;
	display: inline-block;
	label.hasCheckBox + label{
		margin-left: 4px;
	}
}

.builder-fancy-divider-radio{
	width: 100%;
	display: inline-block;
}

#element-settings{
	padding: 10px;
	background: none;
	border: none;
	> div{
		margin-bottom: 10px;
		clear: left;
	}
	label{
		display: block;
	}
}

div[id^="builderimageelement"]{
	~ .redactor_box iframe{
		background:url("@{path}psd-light.png") left top repeat;
	}
}

/*Template Chooser*/

#SelectBaseTemplateForEmailTemplateWizardView{
	> .left-column{
		padding: 0 !important;
	}
	.mini-pillbox{
		padding: 0 15px;
	}
}

#chosen-layout{
	//text-align: center;
	margin: 30px auto;
	i{
		font-size: 400px;
		line-height: 60%;
		float: left;

		width: 25%;
		text-align: center;
		border-right: 1px solid #ccc;
		margin-right: 30px;
		&:after{
			position: relative;
			top: -15px;
		}
	}
	p{
		font-size: 14px;
		line-height: 24px;
		color: #555;
		font-weight: bold;
		float: left;
		width: 65%;
	}
	h3{
		padding-top: 30px;
		font-size: 18px;
	}
	#chooser-overlay{
		margin-top: 30px;
	}
}

.template-pager{
	text-align: center;
	border-top: 1px solid #fff;
	div{
		border-top: 1px solid #fff;
		padding-top: 10px;
	}
}

#saved-templates,
#templates{
	//position: absolute;
	display: none;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	.templates-chooser-list > ul > li {
		margin: 0 0 75px 0;
		width: 20%;
		padding: 0 15px;
	}
	.z-button{
		margin-top: 10px;
		float: right;
	}
	.secondary-button{
		margin-top: 10px;
		float: left;
	}
	.mini-pillbox{
		margin-bottom: 30px;
	}
	.closeme{
		line-height: 24px;
		float: right;
		i{
			font-weight: normal !important;
			.symbly(26px);
			line-height: 1;
			border: none;
			margin-right: 5px;
			outline: none !important;
			display: inline-block;
			position: relative;
			top: 0px;
			color: @themeColor2;
			margin-top: 0;
		}
	}
	li{
		position: relative;
	}
	.template-info{
		position: absolute;
		right: 18px;
		top: 0px;
		.button-actions{
			width: 225px;
			li{
				width: 100%;
			}
		}
		h4{
			text-align: left;
			margin-top: 5px;
			margin-bottom: 10px;
		}
		p{
			white-space: normal;
			line-height: 1.2;
		}
		.after-form-details-content{
			margin-top: 15px;
			text-align: left;
			color:#ccc !important;
			padding-left: 0;
		}
		.button-actions {
			top:30px;
		}
		.icon-trigger:before{
			top:13px;
		}
		.icon-details{
			margin-right: 0;
		}
	}
}

@media all and (max-width: 1000px){
	#templates{
		.templates-chooser-list li{
			width: 25%;
		}
	}
}

@media all and (max-width: 800px){
	#templates{
		.templates-chooser-list li{
			width: 33.33%;
		}
	}
}

.templates-chooser-list{
	//margin-bottom: 30px;
	> h3{
		font-weight: normal;
		color: #777;
		.t-shadow(0 1px 0 #fff);
		display: inline-block;
		padding: 0 0 10px 0;
		margin-bottom: 30px !important;
		&:first-child{
			color: @themeColor;
			border-bottom: 1px solid @themeColor;
			margin-right: 30px !important;
		}
	}
	label{
		display:block;
		width: 100%;
		height: 100%;
		border: 3px solid #efefef;
		.radius(2px);
		overflow: hidden;
		h4{
			width: 100%;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 10px 0;
			background: #efefef;
			color: #9b9b9a;
			.t-shadow(0 1px 0 #fff);
			font-size: 13px;
			font-weight: bold;
		}
		i{
			display: block;
			text-align: center;
			font-size: 130px;
			line-height: 1px;
			margin-top: 50px;
			color: #ddd;
		}
	}
	img{
		margin: 5px auto 0 auto;
	}
}

.base-template-selection{
	list-style: none;
	width: 150px;
	height: 150px;
	float: left;
	text-align: center;
	position: relative;
	margin: 0 15px 15px 0;
	cursor: pointer;
	input[type="radio"]{
		visibility: hidden;
		display: none;
	}
	input[type="radio"]:checked + label{
		overflow: hidden;
		.b-shadow(0 0 3px 0px @themeColor);
		//.b-shadow(0 0 1px 1px rgba(153, 153, 153, 0.3));
	}
}

/*Merge Tags*/
.MergeTagsView{
	padding-right: 15px;
	.hasTree{
		width: 100%;
		position: relative;
	}
	.treeview ul{
		background: none !important;
	}
	li{
		cursor: pointer;
	}
	&.wizard-merge-tags{
		position: absolute;
		right: -250px;
		top: 0;
		padding-right: 0;
		&:before{
			content: "";
			border: 10px solid #323232;
			border-top-color: transparent;
			border-left-color: transparent;
			border-bottom-color: transparent;
			position: absolute;
			left: -20px;
			top: 100px;
		}
	}
}

#MergeTagsTreeAreaBuilderElementEditable{
	width: 250px;
	height: 450px;
	#gradient > .vertical-three-colors( #ffffff, #f5f5f5, 80%, #f5f5f5 );
	border: 5px solid #323232;
	.b-shadow(~"inset 0 0 3px 0 #111, 0 0 3px #111");
	.radius(6px);
}

.redactor_toolbar li a.zurmoImage:before {
	.symbly(14px);
	content: '\0112';
	//background-image: url("@{path}email-builder/merge-tags.png");
	//background-color: pink !important;
	//border: 1px solid gold !important;
	&:hover {
		//background-image: url("@{path}email-builder/merge-tags-hover.png");
	}
}

.redactor_toolbar li a.re-mergeTags {
	background-image: url("@{path}email-builder/merge-tags.png");
	width: 80px !important;
	&:hover {
		background-image: url("@{path}email-builder/merge-tags-hover.png");
	}
}

#redactor_image_box{
	img{
		border: 1px solid #dfdfdf;
	}
}

#ContentForEmailTemplateWizardView{
	.email-template-content,
	.tab,
	.redactor_box,
	.redactor_box iframe,
	#BuilderEmailTemplateWizardForm_textContent{
		height: 100% !important;
	}
	.tab{
		overflow: hidden;
	}
	.email-template-content{
		padding-bottom: 0;
		margin-bottom: 0;
		+ .errorMessage{
			margin-top: 32px;
		}
	}
	.email-template-combined-content{
		padding-bottom: 0;
		margin-bottom: 0;
		min-height: 600px;
	}
}

.email-template-textContent{
	line-height: 1.4 !important;
	font-size: 16px !important;
	padding: 10px 15px !important;
	textarea{
		line-height: 1.4 !important;
		font-size: 16px !important;
		min-height: 600px;
	}
}

.divider-swatch{
	width: 100%;
	margin-bottom: 20px;
	input{
		margin-top:8px !important
	}
	label{
		width: 85%;
	}
	.fancy-divider-label{
		display: none;
	}
}

.fancy-divider-1,
.fancy-divider-2,
.fancy-divider-3,
.fancy-divider-4,
.fancy-divider-5{
	width: 100%;
	height: 30px;
	display: block;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

.fancy-divider-1{
	background-image: url("@{path}email-builder/fancy-divider-1.png");
}
.fancy-divider-2{
	background-image: url("@{path}email-builder/fancy-divider-2.png");
}
.fancy-divider-3{
	background-image: url("@{path}email-builder/fancy-divider-3.png");
}
.fancy-divider-4{
	background-image: url("@{path}email-builder/fancy-divider-4.png");
}
.fancy-divider-5{
	background-image: url("@{path}email-builder/fancy-divider-5.png");
}

#BuilderElementEditableModelForm_content_text{
	min-height: 400px;
}

#ContentForEmailTemplateWizardView,
#CampaignEditView,
#AutoresponderEditAndDetailsView{
	.redactor_box iframe{
		min-height: 600px !important;
	}
}